<template>
  <div class="app-container pg-order-detail">
    <el-form ref="orderForm" label-width="110px" :model="orderForm" size="mini">
      <!-- 基本信息 begin -->
      <div class="part-title">
        <h4 class="title-name">基本信息</h4>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="订单号：" prop="orderNo">
            <el-input v-model="orderForm.orderNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="阿里单号：" prop="aliOrderNo">
            <el-input v-model="orderForm.aliOrderNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="物流单号：" prop="referenceNo">
            <el-input v-model="orderForm.referenceNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="仓库：" prop="warehouseName">
            <el-input v-model="orderForm.warehouseName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="运输产品：" prop="productName">
            <el-input v-model="orderForm.productName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="转单号：" prop="carrierBustNo">
            <el-input v-model="orderForm.carrierBustNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="mb10" label="备注：" prop="remarks">
            <el-input type="textarea" rows="1" v-model="orderForm.remarks" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 基本信息 end -->
      <!-- 发件人信息 begin -->
      <div class="part-title">
        <h4 class="title-name">发件人信息</h4>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="发件人：" prop="consignorName1">
            <el-input v-model="orderForm.consignorName1" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件公司：" prop="consignorName2">
            <el-input v-model="orderForm.consignorName2" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件国家：" prop="consignorCountryCode">
            <el-input v-model="orderForm.consignorCountryCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件州/省：" prop="consignorProvince">
            <el-input v-model="orderForm.consignorProvince" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="发件城市：" prop="consignorCity">
            <el-input v-model="orderForm.consignorCity" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件区：" prop="consignorStateRegionCode">
            <el-input v-model="orderForm.consignorStateRegionCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件邮编：" prop="consignorPostalCode">
            <el-input v-model="orderForm.consignorPostalCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="手机号：" prop="consignorMobile">
            <el-input v-model="orderForm.consignorMobile" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="发件电话：" prop="consignorTelephone">
            <el-input v-model="orderForm.consignorTelephone" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="发件邮箱：" prop="consignorEmail">
            <el-input v-model="orderForm.consignorEmail" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item class="mb10" label="发件地址1：" prop="shipperAddress1">
            <el-input v-model="orderForm.shipperAddress1" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="mb10" label="发件地址2：" prop="shipperAddress2">
            <el-input v-model="orderForm.shipperAddress2" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 发件人信息 end -->
      <!-- 收件人信息 begin -->
      <div class="part-title">
        <h4 class="title-name">收件人信息</h4>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="收件人：" prop="consigneeName1">
            <el-input v-model="orderForm.consigneeName1" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件公司：" prop="consigneeName2">
            <el-input v-model="orderForm.consigneeName2" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件国家：" prop="consigneeCountryCode">
            <el-input v-model="orderForm.consigneeCountryCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件州/省：" prop="consigneeProvince">
            <el-input v-model="orderForm.consigneeProvince" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="收件城市：" prop="consigneeCity">
            <el-input v-model="orderForm.consigneeCity" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件区：" prop="consigneeStateRegionCode">
            <el-input v-model="orderForm.consigneeStateRegionCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件邮编：" prop="consigneePostalCode">
            <el-input v-model="orderForm.consigneePostalCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="手机号：" prop="consigneeMobile">
            <el-input v-model="orderForm.consigneeMobile" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item class="mb10" label="收件电话：" prop="consigneeTelephone">
            <el-input v-model="orderForm.consigneeTelephone" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="mb10" label="收件邮箱：" prop="consigneeEmail">
            <el-input v-model="orderForm.consigneeEmail" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item class="mb10" label="收件地址1：" prop="consigneeStreet1">
            <el-input v-model="orderForm.consigneeStreet1" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="mb10" label="收件地址2：" prop="consigneeStreet2">
            <el-input v-model="orderForm.consigneeStreet2" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 发件人信息 end -->
      <!-- 货物信息 begin -->
      <div class="part-title">
        <h4 class="title-name">货物信息</h4>
      </div>
      <el-table class="mb20" :data="orderForm.packageList" border>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="包装类型"
          prop="packageType"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="数量"
          prop="quantity"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="⻓宽⾼单位" prop="unit"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="120" align="center" label="长*宽*高">
          <template slot-scope="scope">
            <div class="over-tooltip">
              {{ scope.row.length }} * {{ scope.row.width }} * {{ scope.row.height }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="重量单位"
          prop="weightUnit"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="单个包裹重"
          prop="weight"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="120" align="center" label="长*宽*高(入库)">
          <template slot-scope="scope">
            <div v-if="scope.row.scanLength" class="over-tooltip">
              {{ scope.row.scanLength }} * {{ scope.row.scanWidth }} * {{ scope.row.scanHeight }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip min-width="88" align="center" label="入库重"
          prop="scanWeight"></el-table-column>
        <el-table-column label="入库照片" align="center" min-width="120">
          <template slot-scope="scope">
            <el-image v-if="!!scope.row.scanImgUrl" style="width: 40px; height: 40px" :src="scope.row.scanImgUrl"
              :preview-src-list="[scope.row.scanImgUrl]">
            </el-image>
            <span v-else class="color-999">无图片</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 货物信息 end -->
      <!-- 产品信息 begin -->
      <div class="part-title">
        <h4 class="title-name">产品信息</h4>
      </div>
      <el-table class="mb20" :data="orderForm.productList" border>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="中文名" prop="productName"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="英文名" prop="productNameEn"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="产品数量" prop="productQuantity">
        </el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="数量单位" prop="productUnit"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="HS编码" prop="hsCode"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" align="center" label="申报单价" prop="declarationPrice"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="78" align="center" label="是否带电">
          <template slot-scope="scope">
            <div class="over-tooltip">{{ scope.row.hasBattery | filterDict(dict.type['yes_no']) }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip min-width="88" align="center" label="材质" prop="material"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="88" align="center" label="材质" prop="purpose"></el-table-column>
      </el-table>
      <!-- 产品信息 end -->
    </el-form>
  </div>
</template>
<script>
import mixin from '@/utils/filtermixin/mixin';
import * as API_Order  from '@/api/aliorder/order';

export default {
  name: 'pg-order-detail',
  dicts: ['yes_no'],
  mixins: [mixin],
  data() {
    return {
      orderId: undefined,
      orderForm: {
        id: undefined,
        orderNo: undefined,
        aliOrderNo: undefined,
        referenceNo: undefined,
        productName: undefined,
        warehouseName: undefined,
        carrierBustNo: undefined,
        remarks: undefined,
        consignorName1: undefined,
        consignorName2: undefined,
        consignorMobile: undefined,
        consignorTelephone: undefined,
        consignorEmail: undefined,
        consignorStreet1: undefined,
        consignorStreet2: undefined,
        consignorCountryCode: undefined,
        consignorCity: undefined,
        consignorPostalCode: undefined,
        consignorStateRegionCode: undefined,
        consignorProvince: undefined,
        consigneeName1: undefined,
        consigneeName2: undefined,
        consigneeMobile: undefined,
        consigneeTelephone: undefined,
        consigneeEmail: undefined,
        consigneeStreet1: undefined,
        consigneeStreet2: undefined,
        consigneeCountryCode: undefined,
        consigneeCity: undefined,
        consigneePostalCode: undefined,
        consigneeStateRegionCode: undefined,
        consigneeProvince: undefined,
        packageList: [],
        productList: []
      }
    };
  },
  created () {
    // 获取页面Id
    let { id } = this.$route.params;
    this.orderId = id;
  },
  mounted() {
    if (this.orderId) {
      this.getPageData();
    };
  },
  methods: {
    getPageData() {
      API_Order.getDetailService(this.orderId).then(response => {
        let { bookOrder, product, apackage } = response.data || {};
        this.orderForm = {
          ...bookOrder,
          productList: product || [],
          packageList: apackage || []
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pg-order-detail {
  .part-title {
    margin-bottom: 0;
  }
  .el-form-item--mini {
    margin: 3px 0 3px 0px;
  }

  .like-table-box {
    .like-tr {
      display: flex;
      border: solid 1px #dfe6ec;

      .like-td {
        padding: 8px 10px;
        line-height: 20px;

        &+.like-td {
          border-left: solid 1px #dfe6ec;
        }

        &.label {
          width: 76px;
          color: #515152;
        }

        &.value {
          flex: 1;
          min-width: 0;
          color: #515152;
        }
      }

      &+.like-tr {
        border-top: none;
      }
    }
  }

  ::v-deep .el-table {
    &__body-wrapper td {
      padding: 6px 0 !important;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    &__expand-column .cell {
      padding: 0;
    }

    .rowTable {
      padding: 15px 20px 6px 20px;
      margin: -6px 0;
      background: #ebeef5;

      // font-size: smaller;
      .el-form-item {
        margin-bottom: 10px !important;
      }
    }

    .box-goods-part {
      margin: -7px -1px -6px 0;
      padding: 0 0 10px 47px;

      // background: #dfe6ec;
      .part-title {
        margin-bottom: 10px;
      }

      .el-table__header-wrapper {
        .has-gutter {
          th {
            height: 36px;

            .cell {
              font-size: 12px;
            }
          }
        }
      }

      .el-table__footer-wrapper {
        .has-gutter {
          td {
            padding: 0 !important;
            background: #dfe6ec;
          }
        }
      }
    }
  }
}
</style>
